import React, {Fragment} from 'react';
import {Button, Space} from "antd";
import {MinusOutlined, PlusOutlined} from '@ant-design/icons';

/**
 * 画布放大|缩小
 */
export interface IProps {
    float?: boolean;
    zoom: number;
    onZoomIn: () => void;
    onZoomOut: () => void;

}

export default React.memo((props: IProps) => {

    const {zoom, onZoomIn, onZoomOut} = props;

    return (
        <Fragment>
            <div className="zoom workflow-editor-zoom">
                <Space size="small" style={{display: 'flex'}}>
                    <Button
                        type={"text"}
                        size="small"
                        icon={<MinusOutlined/>}
                        disabled={zoom <= 0.3}
                        onClick={onZoomOut}
                    />
                    {Math.round(zoom * 100)}%
                    <Button
                        type={"text"}
                        size="small"
                        icon={<PlusOutlined/>}
                        disabled={zoom >= 3}
                        onClick={onZoomIn}
                    />
                </Space>
            </div>
        </Fragment>
    )
})
